AI와 함께 코딩하는 새로운 시대, 제대로 시작해봅시다! 🚀
AI와 함께 코딩하는 새로운 시대, 제대로 시작해봅시다! 🚀
Claude Code는 대화형 AI 코딩 어시스턴트입니다.
마치 옆에 시니어 개발자가 앉아서 코딩을 도와주는 것처럼,
자연어로 대화하며 코드를 작성하고 수정할 수 있습니다.
| 기능 | 설명 |
|------|------|
| 🗣️ 자연어 대화 | 일반 대화처럼 명령 |
| 📁 파일 관리 | 읽기/쓰기/수정 자동화 |
| 🔍 코드 분석 | 기존 코드 이해 |
| 🐛 디버깅 | 에러 찾고 수정 |
| 📝 문서화 | 주석/README 자동 생성 |
| 🧪 테스트 | 테스트 코드 작성 |
전통적인 코딩:
1. 구글링 →
2. Stack Overflow 검색 →
3. 복사/붙여넣기 →
4. 수정 →
5. 에러 →
6. 다시 구글링...
Claude Code와 함께:
1. "이거 만들어줘" →
2. 완성! ✨
물론 실제로는 이렇게 간단하지 않지만,
반복 작업과 보일러플레이트는 확실히 줄어듭니다! 🎉
터미널 (Terminal)
Claude Code 설치
기본적인 커맨드라인 사용 능력
호기심과 인내심 😊
# npm으로 설치
npm install -g @anthropic-ai/claude-code
# 또는 yarn으로
yarn global add @anthropic-ai/claude-code
# 프로젝트 디렉토리에서
claude-code
# 또는 특정 디렉토리 지정
claude-code /path/to/project
Welcome to Claude Code! 👋
I can help you with:
- Writing code
- Reading and modifying files
- Debugging
- Creating documentation
What would you like to work on?
>
"src/App.js 파일을 읽어줘"
"src 폴더 안의 모든 .js 파일을 읽어줘"
"프로젝트에서 'useState'를 사용하는 모든 파일을 찾아줘"
"src/components/Button.js 파일을 만들어줘.
React 버튼 컴포넌트로, props로 text와 onClick을 받아야 해."
결과:
// src/components/Button.js
import React from 'react';
function Button({ text, onClick }) {
return (
<button onClick={onClick}>
{text}
</button>
);
}
export default Button;
"src/App.js 파일에서
타이틀을 'Hello World'에서 'Welcome'으로 바꿔줘"
"src/utils/helpers.js에
숫자를 포맷팅하는 formatNumber 함수를 추가해줘"
"npm install axios를 실행해줘"
"git status를 확인해줘"
좋은 프롬프트는 다음을 포함합니다:
What (무엇을): 어떤 기능인가?
Why (왜): 왜 필요한가?
Where (어디에): 어느 파일에?
Who (누구를): 어떤 사용자를 위해?
When (언제): 어떤 상황에서?
How (어떻게): 어떤 방식으로?
"[파일 경로]에 [기능]을 추가해줘.
요구사항:
- [요구사항 1]
- [요구사항 2]
- [요구사항 3]
기술 스택:
- [기술 1]
- [기술 2]"
예시:
"src/api/auth.js에 로그인 API를 추가해줘.
요구사항:
- POST 메소드 사용
- 이메일/비밀번호로 인증
- JWT 토큰 반환
- 에러 처리 포함
기술 스택:
- axios
- JWT"
"다음 순서로 작업해줘:
1. [작업 1]
2. [작업 2]
3. [작업 3]"
예시:
"다음 순서로 작업해줘:
1. src/components 폴더에 Card.js 생성
2. Card 컴포넌트에 title, content, image props 추가
3. CSS 모듈로 스타일링
4. App.js에 Card 컴포넌트 import해서 사용"
"[기능]을 만들어줘.
예시:
[구체적인 예시]"
예시:
"유틸리티 함수 formatDate를 만들어줘.
예시:
formatDate(new Date('2024-01-15'))
→ '2024년 1월 15일'
formatDate(new Date('2024-01-15'), 'short')
→ '24.01.15'"
"로그인 만들어줘"
문제점:
너무 모호함
기술 스택 불명확
요구사항 없음
"React + Express 로그인 시스템을 만들어줘.
프론트엔드 (React):
- src/pages/Login.js 페이지 생성
- 이메일/비밀번호 입력 폼
- 로그인 버튼 클릭 시 API 호출
- 성공 시 토큰 localStorage에 저장
백엔드 (Express):
- POST /api/auth/login 엔드포인트
- JWT 토큰 발급
- bcrypt로 비밀번호 해싱
- 에러 처리 (400, 401, 500)"
"Create React App으로 'my-app' 프로젝트를 생성해줘"
"다음 패키지들을 설치해줘:
- react-router-dom
- axios
- styled-components
- react-query"
"다음 폴더 구조를 만들어줘:
src/
components/
pages/
hooks/
utils/
api/
styles/"
".env.example 파일을 만들어줘.
필요한 환경 변수:
- REACT_APP_API_URL
- REACT_APP_API_KEY"
"src/components/UserCard.js를 만들어줘.
Props:
- user (객체): { id, name, email, avatar }
- onDelete (함수): 삭제 버튼 클릭 핸들러
기능:
- 유저 정보 표시
- 아바타 이미지
- 삭제 버튼"
"UserCard.module.css를 만들어줘.
카드 스타일, hover 효과, 반응형 디자인 포함"
"UserCard.stories.js를 만들어줘.
3가지 스토리:
- Default
- WithoutAvatar
- Loading"
"src/api/client.js에 axios 인스턴스를 만들어줘.
설정:
- baseURL: process.env.REACT_APP_API_URL
- timeout: 5000
- headers: Content-Type application/json
- 요청 인터셉터: JWT 토큰 추가
- 응답 인터셉터: 에러 처리"
"src/api/users.js를 만들어줘.
함수들:
- getUsers(): 모든 유저 조회
- getUser(id): 특정 유저 조회
- createUser(data): 유저 생성
- updateUser(id, data): 유저 수정
- deleteUser(id): 유저 삭제"
"src/hooks/useUsers.js를 만들어줘.
React Query로 users API를 사용하는 커스텀 훅"
"UserCard.test.js를 만들어줘.
테스트 케이스:
- 유저 정보가 올바르게 렌더링되는지
- 삭제 버튼 클릭 시 onDelete 호출되는지
- avatar가 없을 때 placeholder 표시되는지"
"LoginPage 통합 테스트를 만들어줘.
로그인 플로우 전체를 테스트"
"src/utils/validation.js 파일을 읽고 코드 리뷰해줘.
체크 사항:
- 보안 이슈
- 성능 문제
- 베스트 프랙티스
- 개선 가능한 부분"
"src/components/Dashboard.js를 리팩토링해줘.
목표:
- 긴 컴포넌트를 작은 컴포넌트들로 분리
- 중복 코드 제거
- 커스텀 훅으로 로직 분리
- PropTypes 추가"
"App.js를 분석하고 성능 최적화를 제안해줘.
확인 사항:
- 불필요한 리렌더링
- 메모이제이션 필요한 곳
- lazy loading 가능한 컴포넌트
- 번들 크기 최적화"
"src/api 폴더의 모든 함수에 JSDoc 주석을 추가해줘.
포함 사항:
- 함수 설명
- 파라미터 타입/설명
- 리턴 타입/설명
- 사용 예시"
"src/components/Button.js를 TypeScript로 변환해줘.
요구사항:
- Props 인터페이스 정의
- 이벤트 핸들러 타입
- 제네릭 타입 활용"
프로젝트 정보 먼저 제공:
"이 프로젝트는 Next.js 14로 만든 블로그입니다.
App Router를 사용하고, TypeScript와 Tailwind CSS를 쓰고 있어요.
이제 블로그 포스트 목록을 보여주는 페이지를 만들어줘."
원하는 스타일 예시:
"다음과 같은 스타일로 코드를 작성해줘:
예시:
const handleClick = async () => {
try {
const response = await api.getData();
setData(response.data);
} catch (error) {
console.error(error);
showToast('에러 발생');
}
};
한 번에 하나씩:
1단계: "Button 컴포넌트 만들어줘"
→ 확인
2단계: "이제 variant prop 추가해줘 (primary, secondary, danger)"
→ 확인
3단계: "loading 상태도 추가해줘"
→ 확인
수정 전에 항상 읽기:
잘못된 방법:
"App.js에 Header 컴포넌트 추가해줘"
올바른 방법:
1. "App.js 파일을 읽어줘"
2. [내용 확인]
3. "Header 컴포넌트를 import하고 최상단에 배치해줘"
에러 발생 시:
"npm start 실행 중 이런 에러가 발생했어:
[에러 메시지 전체 복사]
해결 방법을 알려줘"
코드 생성 후:
"방금 만든 코드가 다음 조건을 만족하는지 확인해줘:
- [ ] ESLint 에러 없음
- [ ] TypeScript 타입 에러 없음
- [ ] 접근성(a11y) 고려됨
- [ ] 성능 이슈 없음"
Claude Code는 도구입니다.
생성된 코드를 반드시 검토하세요!
✅ 생성된 코드 리뷰
✅ 테스트 실행
✅ 보안 체크
✅ 성능 확인
중요한 변경 전에는 커밋하세요!
git add .
git commit -m "Before Claude Code changes"
프롬프트에 다음을 포함하지 마세요:
❌ API 키
❌ 비밀번호
❌ 개인 정보
❌ 회사 기밀
Claude가 추천한 패키지:
✅ npm trends 확인
✅ GitHub stars/issues 확인
✅ 라이선스 확인
✅ 보안 이슈 확인
기술 스택 명시
요구사항 상세히
예시 제공
작은 단위로 분할
각 단계 확인
점진적 개선
프로젝트 구조 설명
기존 코드 읽기
제약 조건 명시
코드 리뷰
테스트 실행
에러 체크
보일러플레이트 생성
반복 작업 자동화
코드 리팩토링
테스트 코드 작성
문서화
에러 디버깅
복잡한 비즈니스 로직 설계
아키텍처 결정
창의적인 UI/UX 디자인
프로젝트 전체 이해
사람의 판단
파일 읽기/쓰기
간단한 컴포넌트 생성
명령어 실행
API 연동
테스트 작성
리팩토링
복잡한 프로젝트
성능 최적화
자동화 스크립트
Claude Code는 강력한 도구입니다.
하지만 도구는 어떻게 사용하느냐가 중요합니다.
이 가이드가 Claude Code를 제대로 활용하는 데 도움이 되었으면 좋겠습니다!
질문이나 피드백은 댓글로 남겨주세요! 💬
함께 성장하는 개발자가 됩시다! 🚀
작성일: 2025-10-16
태그: #ClaudeCode #AI #코딩어시스턴트 #가이드 #튜토리얼